<template>
 <div class="detail-container">
  <detail-box>
    <div class="detail-info">
      <div class="detail-li">
        <div>
          <label>文件状态：</label>
          <el-radio-group v-model="itemObj.Status" class="ml-4" @change="changeStatus">
            <el-radio label="1" size="large">启用</el-radio>
            <el-radio label="0">禁用</el-radio>
          </el-radio-group>
        </div>
        <div><label>观看次数：</label>{{itemObj.AllVistor}}</div>
        <div><label>上传时间：</label>{{itemObj.CreateTime}} <span class="margin-10"></span></div>
      </div>
      <div class="detail-li">
        <div><label>流 状 态：</label>{{setStatus(itemObj.StreamStatus)}}</div>
        <div><label>总流量：</label>{{$utils.formatFileSize(itemObj.AllFlow * 1000)}}</div>
        <div><label>到期时间：</label>{{itemObj.ExpiredTime}}</div>
      </div>
      <div class="detail-li">
        <div><label>文件大小：</label>{{$utils.formatFileSize(itemObj.FileSize * 1000)}}</div>
        <div><label>拉流节点：</label>{{itemObj.NodeCount}}</div>
      </div>
    </div>
  </detail-box>
  <detail-box title="流信息">
    <div class="detail-info">
      <div class="detail-div">
        <div><label>m3u8拉流信息：</label><el-input readonly v-model="itemObj.M3u8_Url" class="height-30" placeholder="请输入内容"></el-input><span class="margin-10"><a @click="copyFn(itemObj.M3u8_Url)">复制</a></span></div>
      </div>
      <div class="detail-div">
        <div><label>MP4拉流信息：</label><el-input readonly v-model="itemObj.MP4_Url"  class="height-30" placeholder="请输入内容"></el-input><span class="margin-10"><a @click="copyFn(itemObj.MP4_Url)">复制</a></span></div>
      </div>
      <div class="detail-div">
        <div><label>WEB地址信息：</label><el-input readonly v-model="itemObj.PullUrl_WEB"  class="height-30" placeholder="请输入内容"></el-input><span class="margin-10"><a @click="copyFn(itemObj.PullUrl_WEB)">复制</a></span></div>
      </div>
    </div>
  </detail-box>
   <detail-box title="节点信息">
    <div class="detail-info">
      <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        prop="NodeID"
        label="节点ID">
      </el-table-column>
      <el-table-column
        prop="CurVisitor"
        label="在线人数">
      </el-table-column>
      <el-table-column
        prop="AllVistor"
        label="观看总人数">
      </el-table-column>
      <el-table-column
        prop="MaxVisitor"
        label="在线峰值">
      </el-table-column>
      <el-table-column
        prop="OutBM"
        label="出口带宽">
      </el-table-column>
      <el-table-column
        prop="InBM"
        label="入口带宽">
      </el-table-column>
      <el-table-column
        prop="InFlow"
        label="流量">
      </el-table-column>
    </el-table>
    <div class="block pageBox" v-if="pageObj.total">
        <el-pagination @current-change="handleCurrentChange" :currentPage="pageObj.page" background layout="prev, pager, next, jumper" :total="pageObj.total" :page-size="pageObj.size">
        </el-pagination>
    </div>
  </div>
  </detail-box>
 </div>
</template>
<script lang="ts" >
import { defineComponent, ref, getCurrentInstance } from "vue";
import eleTable from '@/components/ele-table/index.vue';
import DetailBox from '@/components/detail-box/index.vue';
import { useRoute } from "vue-router";
import {getrequest} from '@/plugins/axios3';
import { ElMessage } from "element-plus";

export default defineComponent({
  components:{
    eleTable,
    DetailBox
  },
  setup() {
    const loading = ref(true);
    const dialogVisible = ref(false)
    const route = useRoute()
    const instance: any = getCurrentInstance();
    const GL = instance.appContext.config.globalProperties;
    
    const pageObj = ref({page:1,size:10, total: 80})
    const itemObj: any = ref({})
    const tableTitleData = ref([
      { id: 1, label: '测试', slotname: 'typeName' },
      { id: 2, label: '测试2',align:'center' }
    ])
    const tableData = ref([])
    const initData = async() => {
      const {StreamID, ServiceID} = route.query;
      await GL.$axios.get(GL.$api.video.QueryVodStream, {params: {StreamID, ServiceID, PageIndex:pageObj.value.page - 1, PageSize:pageObj.value.size}})
      .then((res: any) => {
        if (res.Code === 0) {
          const data = res.Vods && res.Vods.map(item => {
            item.Status = item.Status + ''
            item.CreateTime = GL.$utils.timeFormat(item.CreateTime)
            item.ExpiredTime = GL.$utils.timeFormat(item.ExpiredTime)
    
            item.AllFlow = GL.$utils.formatNumber(item.AllFlow)
            return item
          })
          itemObj.value = data[0];
          res.Nodes.map(item => {
            item.AllFlow = item.AllFlow ? item.AllFlow.toFixed(2) : 0;
            item.FileSize = item.FileSize ? item.FileSize.toFixed(2) : 0;
            item.OutBM = item.OutBM ? item.OutBM.toFixed(2) : 0;
            item.InBM = item.InBM ? item.InBM.toFixed(2) : 0;
            item.InFlow = item.InFlow ? item.InFlow.toFixed(2) : 0;
          })
          tableData.value = res.Nodes;
          loading.value = false;
          pageObj.value.total = res.NodeTotal;
        }
      })
      .catch((err: any) => {
        console.log(err);
      });
    }
    // 厂商
    const getQueryConfig = async() => {
      GL.$axios.get(GL.$api.video.QueryConfig, {params: {Type: 0}})
      .then((res: any) => {
        if(res.Code === 0) {
          sessionStorage.setItem('config', JSON.stringify(res.Services))
          return res.Service
        }
      })
    }
    let config = JSON.parse(sessionStorage.getItem('config') || '{}') || getQueryConfig()
    const changeStatus = (val) => {
      itemObj.value.Status = val + ''
      if(val == 1) {
        getEnableVodVideo()
      } else {
        getForbidVodVideo()
      }
    }
    // 恢复点播
    const getEnableVodVideo = () => {
      let Passwd;
      config.forEach(item => {
        if(item.ServiceID === itemObj.value.ServiceID) {
          Passwd = item.Passwd
        }
      })
      getrequest(GL.$api.video.EnableVodVideo, {params: {StreamID: itemObj.value.StreamID, ServiceID: itemObj.value.ServiceID, Passwd}}).then((res) =>{
        const data = res.data;
        if(data.Code === 0) {
          ElMessage.success('恢复点播视频成功')
          initData()
        }
      })
    }
    // 禁止点播
    const getForbidVodVideo = () => {
      let Passwd;
      config.forEach(item => {
        if(item.ServiceID === itemObj.value.ServiceID) {
          Passwd = item.Passwd
        }
      })
      getrequest(GL.$api.video.ForbidVodVideo, {params: {StreamID: itemObj.value.StreamID, ServiceID: itemObj.value.ServiceID, Passwd}}).then((res) =>{
        const data = res.data;
        if(data.Code === 0) {
          ElMessage.success('禁用点播视频成功')
          initData()
        }
      })
    }
    const handleCurrentChange = (val) => {
      pageObj.value.page = val
      initData()
    }
    const setStatus = (val) => {
      return val ? '已预热': '未预热'
    }
    const copyFn = (val: string) => {
      GL.$utils.copyFn(val)
    }
    initData()
    return {
      dialogVisible,
      tableTitleData,
      tableData,
      loading,
      pageObj,
      changeStatus,
      itemObj,
      setStatus,
      handleCurrentChange,
      copyFn
    }
  }

})



</script>

<style lang="scss" scoped>
.detail-container{
  .detail-info{
    .detail-li{
      display: flex;
      height: 40px;
      line-height: 40px;
      margin-bottom: 10px;
      div{
        width: 33%;
        display: flex;
        align-items: center;
        span{
          margin-left: 20px;
          color: #409eff;
          cursor: pointer;
          text-decoration: underline;
          width: 40px;
        }
      }
      label{
        width: 210px;
        text-align: right;
      }
    }
    .detail-div{
      display: flex;
      height: 40px;
      line-height: 40px;
      margin-bottom: 10px;
      div{
        display: flex;
        align-items: center;
        span{
          margin-left: 20px;
          color: #409eff;
          cursor: pointer;
          text-decoration: underline;
          width: 40px;
        }
      }
      label{
        width: 210px;
        text-align: right;
      }
    }
  }
  .detail-echart{
    display: flex;
    .echart1, .echart2{
      width: 50%; 
    }
  }

  .margin-10{
    margin-left:10px
  }
  .height-30{
    height: 30px;
    width: 400px !important;
    margin-right: 10px;
  }
  .pageBox{
    margin-top: 20px;
    text-align: center;
  }
 
  :deep(.el-icon){
    margin: auto;
  }
}
</style>